<template>
    <div class="container scopClass">
        <h3>赋码管理</h3>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="赋码管理" name="赋码管理">
                <el-row style="margin:20px 0;">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0;width:300px;" placeholder="请输入关键词"  v-model="searchName1">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch1">搜索</el-button>
                        </el-input>
                    </el-col>
                  
                    <!-- <el-button type="primary"  style="float:right; margin-right: 10px">新增地块</el-button> -->
                </el-row>
                <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="productName" sortable label="产品名称"></el-table-column>
                    <el-table-column prop="batch" sortable label="批号"></el-table-column>
                    <el-table-column prop="grade" sortable label="品级"></el-table-column>
                    <el-table-column prop="spec" sortable label="规格">
						<template slot-scope="scope">
							{{scope.row.spec}}{{scope.row.specUnits}}
						</template>
					</el-table-column>
					<el-table-column prop="totalNumber" sortable label="总码量">
						<template slot-scope="scope">
							{{scope.row.totalNumber}}
						</template>
					</el-table-column>
					<el-table-column prop="subNumber" sortable label="未打码量"></el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button
                                v-if="!printing"
                                type="text"
                                @click="handleEdit(scope.$index, scope.row)"
                            >打印</el-button>
                            <el-button
                                v-if="!activation"
                                type="text"
                                @click="handleView(scope.$index, scope.row)"
                            >空码激活</el-button>
							<el-button
                                v-if="!download"
							    type="text"
							    @click="handleDownload(scope.$index, scope.row)"
							>下载</el-button>
							<el-button
                                v-if="!qualified"
							    type="text"
							    @click="handleCertification(scope.$index, scope.row)"
							>合格证</el-button>
							<el-button
                                v-if="!preview"
							    type="text"
							    @click="handleView(scope.$index, scope.row)"
							>预览</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="空码管理" name="空码管理">
                <el-row style="margin:20px 0;">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0;width:300px;" placeholder="请输入关键词"  v-model="searchName2">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch2">搜索</el-button>
                        </el-input>
                    </el-col>
					<el-button type="primary"  style="float:right; margin-right: 10px">申请溯源码</el-button>
                </el-row>
                <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                   <el-table-column prop="breedName" sortable label="追溯码数量"></el-table-column>
                   <el-table-column prop="materialType" sortable label="申请时间"></el-table-column>
                   <el-table-column prop="materialCode" sortable label="状态"></el-table-column>
                   <el-table-column prop="materialCode" sortable label="操作"></el-table-column>
                  
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize2" @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
           
            
        </el-tabs>
    </div>
</template>

<script>
	import { sub_findByList,sub_findPrintMsg,sub_offLinePrint } from "@/request/api";
	import { saveAs } from "file-saver"
    export default {
        data() {
            return {
                activeName: '赋码管理',
                searchName1: '',
                searchName2: '',
                tableData: [],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                pagesize4:10,
                listUrl: '',
                action: '',
                added:true,
                printing:true,
                activation:true,
                download:true,
                qualified:true,
                preview:true,
            };
        },
        created(){
         
        },
        mounted(){
           this.init1();
           this.judgmentAuthority();
        },
        destroyed: function () {
            // this.$store.commit("setStorName","")
        },
        methods: {
			
			handleCertification(index,row){
				this.$router.push({
					path:'/tagging/certification',
					query:{id:row.id}
				})
			},
			handleDownload(index,row){
				// let data = {
				// 	"品名":row.productName,
				// 	"批号":row.batch,
					
				// }
				sub_findPrintMsg(row.id).then((res)=>{
					let data = {
						"品名":res.data.productName,
						"批号":res.data.batch,
						"净含量":res.data.spec + res.data.specUnits,
						"生产企业":"原链",
						"产地":"陕西",
						"生产日期":"2016/06/11"
					}
					var content="{"
					for(var key in data){
						content+="\""+key+"\":"+"\""+data[key]+"\",";
					}
					content = content.substring(0,content.length-1)+"}";
					let list = {
						subpackageId:row.id,
						content:content,
						num:3,
						type:"分包打印"
					}
					sub_offLinePrint(list).then((res)=>{
						var content = res;
						var filename = "追溯码.txt";
						var blob = new Blob([content], {
							type: "text/plain;charset=utf-8"
						});
						 
						saveAs(blob, filename)
					})
					
				})
			},
            // 调用接口
            init1(){
				let data = {
					page:this.currentPage1,
				}
				sub_findByList(data).then((res)=>{
					this.tableData = res.rows
					this.total1 = res.total
				
				})
		    },
            // tabs
            handleClick(tab, event) {
            
            },
            // 
            handleEdit(index,row){
            
            },
            // 查看
            handleView(index,row){
                
            },
            // 删除
            handleDelete(index,row){
                
            },
           
            // 列表搜索
            handleSearch1() {
                this.currentPage1 = 1
                this.init1()
            },
            handleSearch2() {
                this.currentPage2 = 1
                this.init2()
            },
          
            
          
          
            // 分页事件
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            handleCurrentChange2(val){
                this.currentPage2 = val
                this.init2()
            },
            
            //判定操作按钮显示
            judgmentAuthority(){
                var type = JSON.parse(localStorage.getItem("userInfo")).appMenus
                type.map(item => {
                    if(item.appName == '种植平台'){
                        item.menus.map(item1 => {
                            if(item1.name == '赋码管理' && item1.children != null){
                                for(var i = 0; i < item1.children.length; i++){
                                    if(item1.children[i].name == '打印') this.printing = false;
                                    if(item1.children[i].name == '空码激活') this.activation = false;
                                    if(item1.children[i].name == '下载') this.download = false;
                                    if(item1.children[i].name == '合格证') this.qualified = false;
                                    if(item1.children[i].name == '预览') this.preview = false;
                                }
                            }
                        })
                    }
                })
            }
          
         
        }
    }
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru{
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.el-col{
    margin-bottom: 0;
}
/* .scopClass .el-table{ margin-top: 20px;} */
 .el-pagination{
    text-align: center;
}
/* 
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
} */
</style>